<template>
  <div class="end-page" v-show="showWholePage">
    <Carousel :text="scrollText" bgColor="rgba(255,255,255,0.2)"></Carousel>
    <div class="end-header">
      <CatNameTitle :catName="catName" :year="year"></CatNameTitle>
      <div class="apply-btn-box" v-if="brandList.length > 0">
        <router-link :to="'/applyReward/no?from=end&catid='+catid" class="btn">免费申请奖牌证书</router-link>
      </div>
    </div>
    <div class="brand-list" v-if="brandList.length > 0">
      <ul>
        <li v-for="item in brandList" :key="item.id">
          <FinishItem :shortName="item.title" :name="item.gongsi" :address="item.dizhi" :site="item.homepage" :ranking="item.ranking" :img="item.thumb" :itemId="item.itemid"></FinishItem>
        </li>
      </ul>
      <div class="bg-flicker-one"></div>
      <div class="bg-flicker-two"></div>
    </div>

    <div class="generate" v-else>
      <img src="./assets/list-generate.png" alt="">
    </div>
    <div class="media" @click="onMediaForward" v-show="showMediaBtn && brandList.length > 0">
      <div class="media-enter">
        <h6>媒体送阅</h6>
        <div class="line"></div>
        <p>营造推广效益，引领高度关注
        </p>
        <div class="media-flicker"></div>
      </div>
    </div>
    <MyFooter :tel="tel" :isBlack="true"></MyFooter>
    <div class="show-menu" @click="onShowMenu" v-if="isWeiXin" v-show="showMenuBtn">
      <img src="../../assets/img/menu-btn.png" alt="">
    </div>
    <div class="recomand-brand-icon btn-round" @click="onAddBrand" v-if="!isWeiXin">
      品牌<br>推荐
    </div>
    <VoteMenu v-show="showMenu" @closeMenu="onCloseMenu" :cstatus="6"></VoteMenu>
    <div class="bottom-btn home-btn" @click="onHome" v-if="showHomeBtn && isWeiXin">
      <img src="./assets/home.png" alt="">
      <span>首页</span>
    </div>
  </div>
</template>

<script>
import Carousel from '../../components/Carousel'
import FinishItem from './components/FinishItem'
import MyFooter from '../../components/MyFooter'
import * as events from '../../store/events'
import CatNameTitle from '../../components/CatNameTitle'
import VoteMenu from '../../components/VoteMenu'
import scroll from '../../mixins/scroll'
import * as auth from '../../common/auth'
import setTitle from '../../common/setTitle'
import { mapState } from 'vuex'

export default {
  mixins: [scroll],
  components: {
    Carousel,
    FinishItem,
    MyFooter,
    CatNameTitle,
    VoteMenu
  },
  data() {
    return {
      catid: '',
      scrollText: '',
      catName: '',
      year: '',
      brandList: [],
      tel: '',
      isWeiXin: false, // 是否是微信浏览器
      showMenu: false, // 是否显示菜单
      // 是否显示返回首页按钮
      showHomeBtn: false,
      // 是否显示媒体转发按钮
      showMediaBtn: false,
      // 控制整页是否显示 防止来回跳页时候屏幕闪动
      showWholePage: false,
      showMenuBtn: true // 控制菜单按钮
    }
  },
  computed: {
    ...mapState({
      status: s => s.categoryStatus
    })
  },
  created() {
    this.isWeiXin = this.$getDeviceInfo().isWeiXin
    window.sessionStorage.setItem('fromIndex', true)
  },
  mounted() {
    this.$showLoading()
    // 登录
    auth.login(this.$route).then(() => {
      // 检查是否被封号
      auth.check(this.$route).then(() => {
        this.catid = this.$route.query.catid || this.$router.params.catid
        this.getStatus() // 获取当前行业投票状态
      }).catch((msg) => {
        this.$hideLoading()
        if (msg) {
          this.$toast.center(msg)
        }
      })
    }).catch(() => { })
  },
  methods: {
    // 获取当前行业投票状态
    getStatus() {
      if (!this.status) {
        this.$api.getCategoryStatus(this.catid).then(data => {
          this.$store.commit(events.SET_CATE_STATUS, parseInt(data.data.category_status || data.data.status))
          this.$store.commit(events.SET_PAGE_SWITCH, parseInt(data.data.page_switch))
          this.gotStatus(this.status)
        }).catch(err => {
          console.log(err)
        })
      } else {
        this.gotStatus(this.status)
      }
    },
    gotStatus(status) {
      if (status === 40002) { // catid不正确 跳转到该页面
        this.$router.replace('/catidNotRightPage')
        return
      } else if (status !== 5 || !this.isWeiXin) {
        this.$router.replace("/?catid=" + this.catid)
        return
      } else {
        this.showWholePage = true
        this.getList()
      }
    },
    getList() {
      this.$api.getBangdanList(this.catid).then(data => {
        this.$hideLoading()
        if (parseInt(data.data.status) === 1) {
          // 品牌列表
          this.brandList = data.data.brandList
          // 解决ios回退白屏的问题，勿删
          window.scrollTo(0, 1)
          window.scrollTo(0, 0)
          // 行业名称
          this.catName = data.data.catname || ''
          // 年份
          this.year = data.data.bangdan_year
          // catname存到store中
          this.$store.commit(events.SET_CAT_NAME, this.catName)
          // 跑马灯内容
          this.scrollText = data.data.rolling_text.join(' ')
          // 标题
          setTitle(this.year + '年中国' + this.catName + '十大品牌排行')
          // 电话
          this.tel = data.data.service_tel
          // 微信存到store中wxService
          if (data.data.wechatqr) {
            this.$store.commit(events.SET_WX_SERVICE, data.data.wechatqr)
          }
          // 客服数据
          let service = {
            qq: data.data.qq, // 客服qq号码
            wxqr: data.data.wechatqr, // 客服微信二维码
            tel: data.data.service_tel  // 客服电话
          }
          // 客服数据存到store中
          this.$store.commit(events.SET_SERVICE_INFO, service)
          // 是否显示返回首页按钮
          this.showHomeBtn = parseInt(data.data.openHomePage)
          // 是否显示媒体转发按钮
          this.showMediaBtn = parseInt(data.data.mediaButton)
          // 小程序存到store中AppletLink
          if (data.data.share_xcx_ewm_link) {
            this.$store.commit(events.SET_WX_APPLET_LINK, data.data.share_xcx_ewm_link)
          }
          // 微信二维码存到store中
          this.$store.commit(events.SET_WX_VOTE_LINK, data.data.share_ewm_link)
        } else {
          this.$toast.center(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
        this.$hideLoading()
      })
    },
    // 显示菜单
    onShowMenu() {
      this.showMenu = true
      this.scroll(false)
      this.showMenuBtn = false
    },
    // 关闭弹出菜单
    onCloseMenu() {
      this.showMenu = false
      this.scroll(true)
      this.showMenuBtn = true
    },
    onHome() {
      this.$router.push('/homepage?catid=' + this.$route.query.catid)
    },
    onMediaForward() {
      this.$router.push('/mediaForward?catid=' + this.$route.query.catid)
    },
    // 非微信 进入添加品牌
    onAddBrand() {
      this.$router.push('/addbrand?catid=' + this.catid + '&from=index')
    }
  },
  destroyed() {
    setTitle('品牌中网')
  }
}
</script>

<style scoped lang="scss">
.end-page {
  background-color: #1e1d1b;
  .bottom-btn {
    background-color: rgba(255, 255, 255, 0.5);
    color: #333;
  }
  .media {
    position: relative;
    z-index: 0;
    .media-enter {
      width: 6.9rem;
      height: 2.3rem;
      padding: 0.64rem 0 0.5rem;
      background: url("./assets/media-enter-bg.png") center no-repeat;
      background-size: cover;
      border-radius: 0.14rem;
      margin: 0 auto 0.3rem;
      text-align: center;
      h6 {
        font-size: 0.4rem;
        line-height: 0.4rem;
        letter-spacing: 0.04rem;
        color: rgba(233, 206, 83, 1);
      }
      .line {
        width: 0.8rem;
        height: 2px;
        background: rgba(255, 255, 255, 1);
        margin: 0.2rem auto 0.3rem;
      }
      p {
        font-size: 0.26rem;
        line-height: 0.26rem;
        letter-spacing: 0.02rem;
        color: rgba(255, 255, 255, 1);
      }
      .media-flicker {
        width: 4.07rem;
        height: 3.84rem;
        background: url("./assets/bg-flicker.png") center no-repeat;
        background-size: cover;
        position: absolute;
        top: -0.4rem;
        right: 0;
        z-index: -1;
      }
    }
  }

  .recomand-brand-icon {
    left: 50%;
    bottom: 0.45rem;
    transform: translate3d(-0.44rem, 0, 0);
    position: fixed;
  }
}
.end-header {
  width: 100%;
  height: 6.4rem;
  margin-top: -0.86rem;
  padding-top: 1.4rem;
  background: url(./assets/header-bg.png) center no-repeat;
  background-size: cover;
  .apply-btn-box {
    margin-top: 2.3rem;
    text-align: center;
    .btn {
      width: 3.4rem;
      // height: 0.7rem;
      border: 2px solid #f7cc3d;
      border-radius: 0.1rem;
      background-color: rgba(247, 204, 61, 0.45);
      font-size: 0.32rem;
      line-height: 0.32rem;
      padding: 0.19rem 0;
      color: #fff;
    }
  }
}
.generate {
  width: 100%;
  font-size: 0;
  img {
    width: 100%;
    height: auto;
  }
}
.brand-list {
  position: relative;
  z-index: 0;
  .bg-flicker-one {
    width: 4.07rem;
    height: 3.84rem;
    background: url("./assets/bg-flicker.png") center no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
  }
  .bg-flicker-two {
    width: 4.07rem;
    height: 3.84rem;
    background: url("./assets/bg-flicker.png") center no-repeat;
    background-size: cover;
    position: absolute;
    top: 3.6rem;
    left: -2.8rem;
    z-index: -1;
  }
}
</style>
